<template>
	<view :style="{'--color':vuex_config.themeColor1}">
		<view class="data-list">
			<block v-for="(item, index) in dataList" :key="index">
				<view class="data-item">
					<view class="data-top u-border-bottom">
						<view class="">订单号：{{ item.order_no }}</view>
						<view class="sww-tp">{{ item | statusFilter }}</view>
					</view>
					<view class="data-center">
						<image class="data-img" :src="(item.img || '').split(',')[0]" mode="aspectFill"></image>
						<view class="data-right">
							<view class="data-name u-line-2">{{ item.name }}</view>
							<view class="data-dec u-line-1">商品规格：{{ item.detail_name }}</view>
							<view class="price_main">
								<view class="data-price sww-tp">
									<text class="u-font-26">￥</text>
									<text class="u-font-34">{{ $price(item.total_amount) | priceFmt(false) }}</text>
									<text class="u-font-26">{{ $price(item.total_amount) | priceFmt(true) }}</text>
								</view>
								<view class="buy_num">x {{ item.detail_number || 1 }}</view>
							</view>
						</view>
					</view>
					<view class="data-bottom" v-if="item.express"><button class="data-btn u-border" @click="$linkToLogistic(item)">查看物流</button></view>
				</view>
			</block>
		</view>
		<sww-load-more :params="dataListParams" @load="$loadMore">
			<view class="no-data-box">
				<view class="no-data-img iconfont iconfont-e645"></view>
				<view class="no-data-text">您当前没有订单呢</view>
			</view>
		</sww-load-more>
	</view>
</template>

<script>
// import { pagingMixin } from '@/mixins/pagingMixin';
export default {
	// mixins: [pagingMixin],
	components: {},
	data() {
		return {
			baseUrl: 'https://qkl.kailly.com',
			dataList: [],
			dataListParams: {
				page: 1,
				init: false, // 是否加载过(初始化过)
				loadMore: true, // 是否可继续加载
				loading: false, // 是否在加载，用于加载结束前禁止再次加载
				len: 0
			}
		};
	},
	onLoad() {
		this.$initPage();
	},
	filters: {
		// 取小数点前还是后的数字
		priceFmt(price, isPoint = false) {
			let [priceInt, pricePoint] = price.split('.');
			return isPoint ? (pricePoint ? '.' + pricePoint : '') : priceInt;
		},
		statusFilter(item) {
			let state = item.status;
			let type = item.type;
			let val = '';
			switch (state) {
				case '-1':
					val = '已超时';
					break;
				case '0':
					val = '未支付';
					break;
				case '1':
					val = '待发货';
					if (item.express || item.express_no) val = '待收货';
					break;
				case '2':
					val = '退款申请中';
					break;
				case '3':
					val = '已退款';
					break;
				case '4':
					val = '退款被驳回';
					break;
				case '5':
					val = '客服审核中';
					break;
				case '6':
					val = '待确认';
					break;
				case '7':
					val = '已拒单';
					break;
				case '8':
					val = '已入住';
					break;
				case '9':
					val = '已确认';
					break;
				case '10':
					val = '已完成';
					break;
				case '88':
					val = '待收货';
					if (item.pay_status == '10') val = '已完成';
					break;
			}
			return val;
		}
	},
	onReachBottom() {
		this.$loadMore();
	},
	methods: {
		$initPage() {
			this.dataList = [];
			this.dataListParams = {
				page: 1,
				init: false,
				loadMore: true,
				loading: false,
				len: 0
			};
			this.loadDataList();
		},
		//分页加载
		$loadMore() {
			this.loadDataList();
		},
		loadDataList() {
			let pageParams = this.dataListParams;
			if (pageParams.loading) return;
			if (!pageParams.loadMore) return;
			this.$resPost('tripapiOrderList', { page: pageParams.page, type: 0 })
				.then(({ data }) => {
					if (data[0]) {
						pageParams.page += 1;
					} else {
						pageParams.loadMore = false;
					}
					if (!pageParams.init) {
						this.dataList = this.$formatData(data);
					} else {
						this.dataList = this.dataList.concat(this.$formatData(data));
					}
					pageParams.loading = false;
					pageParams.init = true;
					pageParams.len = this.dataList.length;
					this.dataListParams = pageParams;
				})
				.catch(() => {
					pageParams.loading = false;
					pageParams.init = true;
					pageParams.loadMore = false;
					this.dataListParams = pageParams;
				});
		},
		$formatData(list) {
			return list.map(item => {
				if (item.img) {
					item.img = this.baseUrl + item.img;
				}
				return item;
			});
		},
		// 跳转到物流详情页
		$linkToLogistic(item) {
			this.$to(`/package/order/oldLogistic/index?id=${item.pk_id}&express_no=${item.express_no}&express=${item.express}`);
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $www-theme-bg;
}
</style>
<style scoped lang="scss">
/* 数据列表 */
.data-list {
	width: 100%;
	font-size: 26rpx;
	margin-top: 1px;
	.data-item {
		width: 100%;
		background-color: #ffffff;
		padding: 0 24rpx 1rpx;
		margin-bottom: 16rpx;
		.data-top {
			width: 100%;
			height: 84rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.data-center {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			.data-img {
				width: 200rpx;
				height: 200rpx;
				margin-right: 24rpx;
				border-radius: 16rpx;
				box-shadow: 0 0 5rpx #eeeeee;
			}
			.data-right {
				height: 200rpx;
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.data-name {
					padding-top: 14rpx;
				}
				.data-dec {
					font-size: 24rpx;
					color: #666;
					margin-top: 4rpx;
				}
				.price_main {
					margin: auto 0;
					display: flex;
					align-items: center;
					.data-price {
						flex: 1;
						overflow: hidden;
					}
				}
			}
		}
		.buy_num {
			color: #999;
			font-size: 30rpx;
		}
	}
}

.data-bottom {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding-bottom: 20rpx;
	.data-btn {
		min-width: 140rpx;
		padding: 0 12rpx;
		font-size: 24rpx;
		color: #999999;
		margin-left: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 46rpx;
		margin-right: 0;
		background-color: inherit;
		&::after {
			border-radius: 22rpx;
			border-color: #999999;
		}
		&:last-child {
			background-color: var(--color);
			color: #ffffff;
			border-radius: 11rpx;
			line-height: 50rpx;
			&::after {
				border: none;
			}
		}
	}
}
.no-data-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.no-data-img {
		width: 415rpx;
		height: 321rpx;
		font-size: 150rpx;
	}

	.no-data-text {
		font-size: 26rpx;
		color: #999999;
	}
}
</style>
